<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>课程模板 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="1-1" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="课程名称">
                                <el-input v-model="info.name"></el-input>
                            </el-form-item>
                            <el-form-item label="课程主题">
                                <el-row v-for="(item, index) in topicList" :key="index" class="topicItem">
                                    <el-col :span="22">
                                        <el-input v-model="topicList[index]">
                                        </el-input>
                                    </el-col>
                                    <el-col :span="2"><i class="el-icon-close topic-del" @click="delTopic(index)"></i></el-col>
                                </el-row>
                                <el-button @click="addTopic" type="text" size="small"><i class="el-icon-plus"></i>添加</el-button>
                            </el-form-item>
                            <el-form-item label="课程类别">
                                <el-select v-model="info.type" placeholder="请选择课程类别">
                                    <el-option v-for="(item, index) in types" :label="item" :value="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程时长">
                                <el-select v-model="info.courseTime" placeholder="请选择">
                                    <el-option :label="item+'分钟'" :value="item" :key="item" v-for='item in times'></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="适用等级">
                                <el-checkbox-group v-model="selectedTags">
                                    <el-checkbox v-for="(item, index) in tags" :label="item"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="最大人数">
                                <el-input v-model="info.limit" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="校区" hidden>
                                <el-select v-model="info.schoolId" placeholder="请选择校区">
                                    <el-option v-for="(item, index) in schools" :label="item.attrs.name" :value="item.attrs.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否固定课程">
                                <el-radio-group v-model="info.isFixed">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否扣学时">
                                <el-radio-group v-model="info.isCount">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                                <el-button @click="back">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script type="text/javascript">
    function HTMLEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }

    function HTMLDecode(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }

    function html2Escape(sHtml) {
        return sHtml.replace(/[<>&"]/g, function(c) { return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } [c]; });
    }

    function html_encode(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, ">");
        s = s.replace(/</g, "<");
        s = s.replace(/>/g, ">");
        s = s.replace(/ /g, " ");
        s = s.replace(/\'/g, "'");
        s = s.replace(/\"/g, "\"");
        s = s.replace(/\n/g, "<br>");
        return s;
    }
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                topicList: [],
                selectedTags: [],
                schools: [],
                types: [],
                tags: [],
                times: [60, 90, 120]
            }
        },
        watch: {

        },
        mounted: function() {
            // var schoolStr = '${schools!}';
            // var typeStr = '${types!}';
            // var tagStr = '${tags!}';
            // var infoStr = '${info!}';
            // // this.topicList = ${topics!}
            // // console.log(this.info.topics)
            // // console.log(this.topicList) 
            // if (schoolStr != '') {
            //     this.schools = JSON.parse(schoolStr);
            // }
            // if (typeStr != '') {
            //     this.types = typeStr.split(",");
            //     this.types.pop();
            // }
            // if (tagStr != '') {
            //     this.tags = tagStr.split(",");
            //     this.tags.pop();
            // }
            // if (infoStr != '') {
            //     console.log(infoStr)
            //     // this.json = JSON.parse(infoStr);
            //     // this.info = JSON.parse(infoStr);
            //     if (this.info.tags != null && this.info.tags != "") {
            //         this.selectedTags = this.info.tags.split(",");
            //         this.selectedTags.pop();
            //     }
            //     var topics = this.info.topics
            //     console.log(topics)
            //     if (topics != null && topics != "") {
            //         // var de = HTMLDecode(this.info.topics)
            //         // console.log(topics)
            //         this.topicList = JSON.parse(topics);
            //         // console.log(this.topicList)
            //         // for (var idx = 0; idx < this.topicList.length; idx++) {
            //         // this.topicList[idx] = decodeURI(this.topicList[idx])
            //         // }
            //         // console.log(this.topicList[0])
            //     }
            // }
        },
        methods: {
            submit() {
                var self = this;
                var tags = "";
                for (var i = 0; i < self.selectedTags.length; i++) {
                    tags += self.selectedTags[i] + ",";
                }
                for (var i = 0; i < self.topicList.length; i++) {
                    if (self.topicList[i] == "") {
                        self.topicList.splice(i, 1);
                        i -= 1;
                    }
                }
                // for (var idx = 0; idx < this.topicList.length; idx++) {
                //     this.topicList[idx] = html2Escape(this.topicList[idx])
                // }
                var topics = JSON.stringify(self.topicList);
                // console.log(topics)
                topics = topics.replace("'", "’");

                var param = Qs.stringify({
                    courseId: self.info.id,
                    name: self.info.name,
                    topics: topics,
                    type: self.info.type,
                    tags: tags,
                    schoolId: self.info.schoolId,
                    isFixed: self.info.isFixed,
                    isCount: self.info.isCount,
                    courseTime: self.info.courseTime,
                    limit: self.info.limit
                });
                loading();
                axios({
                        url: '/jh/admin/course/submit',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            endLoading();
                            window.location.href = "/jh/admin/course/list";
                            // msg("登录成功");
                        } else {
                            endLoading();
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("提交失败");
                        console.log(error);
                    });
            },
            addTopic() {
                this.topicList.push("");
            },
            delTopic(index) {
                this.topicList.splice(index, 1);
            },
            back() {
                window.history.back();
            }
        }
    })
    </script>
    <script>
        vue.info = ${info}
        var topics = vue.info.topics;
        if (topics != null && topics != "") {
            vue.topicList = JSON.parse(topics)
        }
        var schoolStr = '${schools!}';
        var typeStr = '${types!}';
        var tagStr = '${tags!}';
        // var infoStr = '${info!}';
        // this.topicList = ${topics!}
        // console.log(this.info.topics)
        // console.log(this.topicList) 
        if (schoolStr != '') {
            vue.schools = JSON.parse(schoolStr);
        }
        if (typeStr != '') {
            vue.types = typeStr.split(",");
            vue.types.pop();
        }
        if (tagStr != '') {
            vue.tags = tagStr.split(",");
            vue.tags.pop();
        } 
        if (vue.info.tags != null && vue.info.tags != "") {
            vue.selectedTags = vue.info.tags.split(",");
            vue.selectedTags.pop();
        }  
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .topicItem {
        margin-bottom: 1rem;
    }

    .topic-del {
        margin-left: 1rem;
        cursor: pointer;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>